<template>
  <div class="flex justify-between text-[#e54c5f]">
    <div class="flex items-center cursor-pointer" @click="handleGo">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <span class="pl-5">{{ $t("订单详情") }}</span>
    </div>
  </div>

  <el-card class="my-5">
    <template #header>
      <div class="card-header">
        <span>{{ $t("交易明细") }}</span>
      </div>
    </template>
    <el-skeleton :rows="5" animated :loading="loading">
      <div class="px-12">
        <div class="flex">
          <div class="flex-1">
            <ul class="text-base text-center">
              <li class="flex justify-around mb-2">
                <span class="text-right w-36">{{ $t("交易类型") }}</span>
                <span class="w-1/2 text-left">{{ $t("充值") }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="text-right w-36">{{ $t("充值方式") }}</span>
                <span class="w-1/2 text-left">{{
                  form.payment_way === "va" ? "VA" : "-"
                }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="text-right w-36">{{ $t("充值币种") }}</span>
                <span class="w-1/2 text-left"> {{ form.currency || "-" }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="text-right w-36">{{ $t("充值金额") }}</span>
                <span class="w-1/2 text-left">{{
                  numberToCurrencyNo(form.amount) || "-"
                }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="text-right w-36">{{ $t("收款账户") }}</span>
                <span class="w-1/2 text-left">{{
                  form.receive_card_number || "-"
                }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="text-right w-36">{{ $t("付款账户") }}</span>
                <span class="w-1/2 text-left">{{
                  form.send_card_number || "-"
                }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="text-right w-36">{{ $t("流水号") }}</span>
                <span class="w-1/2 text-left">{{ form.order_no || "-" }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="text-right w-36">{{ $t("发起时间") }}</span>
                <span class="w-1/2 text-left">{{
                  formatDates(form.create_time)
                }}</span>
              </li>
              <li class="flex justify-around mb-2">
                <span class="text-right w-36">{{ $t("完成时间") }}</span>
                <span class="w-1/2 text-left">{{
                  formatDates(form.finish_time)
                }}</span>
              </li>
            </ul>
          </div>
          <div class="flex-1"></div>
        </div>
      </div>
    </el-skeleton>
  </el-card>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { rechargeOrderInfoApi } from "@/api/account/index";
import { formatDates, numberToCurrencyNo } from "@/utils/utils";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const loading = ref(false);
const router = useRouter();
const form = reactive({});
const { ...route } = useRoute();
onMounted(() => {
  if (route.query.order_no) {
    getData(route.query.order_no);
  }
});
// 获取数据
const getData = async (order_no) => {
  loading.value = true;
  try {
    const res = await rechargeOrderInfoApi({ order_no: order_no });
    Object.assign(form, res);
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

// 跳转
const handleGo = () => {
  router.replace(`/account/recharge`);
};
</script>
